<template>
  <PublicLoading v-if="loading.mounted" />
  <div v-else class="dt-content-page">
    <dl class="dt-pmDetail-info">
      <dt>
        <h2>{{ projectDetail.projectName }}</h2>
        <!-- <el-button type="primary" size="mini">编辑项目信息</el-button> -->
      </dt>
      <dd class="dt-pm-info">
        <span>计划工期：{{ projectDetail.startTime ? projectDetail.startTime.split(' ')[0] : '' }} 至
          {{ projectDetail.endTime ? projectDetail.endTime.split(' ')[0] : '' }} 共{{ projectDetail.totalDays }}天，
          <template v-if="projectDetail.projectState == 2">
            <span v-if="projectDetail.aheadDays > 0" class="inAdvance">提前{{ projectDetail.aheadDays }}天</span>
            <span v-if="projectDetail.aheadDays < 0" class="postpone">延期{{ Math.abs(projectDetail.aheadDays) }}天</span>
          </template>
          <template v-else>
            <span v-if="projectDetail.aheadDays == 0 && projectDetail.remainDays < 0" class="postpone">延期{{
              Math.abs(projectDetail.remainDays) }}天</span>
            <span v-else>剩余{{ projectDetail.remainDays }}天</span>
          </template>
        </span>
        <span>任务数量：{{ projectDetail.taskCount }}</span>
      </dd>
    </dl>
    <dl class="dt-pmDetail-info">
      <dt class="dt-edit-node">
        <h3>项目节点<el-button v-if="projectDetail.isMaster" type="text" icon="el-icon-edit-outline"
            @click="goEditNode">编辑</el-button></h3>
      </dt>
      <dd class="dt-node-dd">
        <div class="dt-node-list">
          <div v-if="!nodeList.length" class="dt-node-add">
            <el-button type="text">暂未设置节点</el-button>
          </div>
          <div v-else class="dt-node-item" :class="index > 0 ? 'dt-line' : ''" v-for="(item, index) in nodeList"
            :key="item.id" @click.stop="nodeTask(item.id, item.addTaskPower)">
            <div class="dt-node-card por" :class="{ working: item.nodeState > 0, 'dt-cur': item.id == nodeId }">
              <div class="dt-nodeTag poa" v-if="item.startTime || item.endTime"
                :class="{ completed: item.nodeState == 2, working: item.nodeState == 1 }">
                {{ item.nodeStateName }}
              </div>
              <!-- <div class="dt-nodeclose poa">
                    <i class="el-icon-close"></i>
                  </div> -->
              <!-- <i class="el-icon-circle-plus poa"></i> -->
              <h4>{{ item.nodeName }}</h4>
              <p v-if="item.master.length">
                <span v-for="master in item.master" :key="master.userId" class="dt-user-name">{{ master.userName
                }}</span>
              </p>
              <p class="dt-null" v-else>暂未设置负责人</p>
              <div class="dt-node-progress">
                <span>权重：{{ item.weight }}%</span><span>进度：{{ item.progress ? item.progress.toFixed(2) : 0 }}%</span>
              </div>
              <div v-if="index != 0" class="dt-dashed-line left poa"></div>
              <div v-if="index != nodeList.length - 1" class="dt-dashed-line right poa"></div>
            </div>
            <!-- <div class="dt-node-time">
                  <p>2024-07-01至2024-07-15</p>
                  <el-button type="text">编辑</el-button>
                </div> -->
            <div class="dt-node-time dt-no-data" v-if="!item.startTime || !item.endTime">
              <!-- <p>共 {{item.planDays}} 天</p> -->
              <p>暂未设置日期</p>
            </div>
            <div class="dt-node-time" v-else>
              <p>{{ item.startTime ? item.startTime.split(' ')[0] : '' }} 至 {{ item.endTime ? item.endTime.split(' ')[0]
                :
                '' }}</p>
              <span v-if="item.aheadDays > 0" class="inAdvance">提前{{ item.aheadDays }}天</span>
              <span v-else-if="item.aheadDays < 0" class="postpone">延期{{ Math.abs(item.aheadDays) }}天</span>
              <span v-else-if="item.aheadDays == 0 && item.residueDays < 0" class="postpone">延期{{
                Math.abs(item.residueDays)
              }}天</span>
              <span v-else>剩余{{ item.residueDays }}天</span>
            </div>
          </div>
        </div>
      </dd>
    </dl>
    <dl class="dt-pmDetail-info table">
      <dt class="dt-title-box">
        <div class="dt-statistics">
          <h3>任务详情</h3>
          <div class="dt-statistics-task">
            <span>任务总数：{{ taskDetailList.totalCount || 0 }}</span>
            <span>进行中：{{ taskDetailList.doingCount || 0 }}</span>
            <span>已完成：{{ taskDetailList.complateCount || 0 }}</span>
            <span>待认领：{{ taskDetailList.waitCount || 0 }}</span>
            <span>已延期：{{ taskDetailList.delayCount || 0 }}</span>
          </div>
          <div class="dt-statistics-output">
            <span>总产值：{{
              taskDetailList.totalOutput
                ? $tools.moneyLower(taskDetailList.totalOutput)
                : taskDetailList.totalOutput == null
                  ? '***'
                  : taskDetailList.totalOutput
            }}元</span>
            <span>已完成产值：{{
              taskDetailList.complateOutput
                ? $tools.moneyLower(taskDetailList.complateOutput)
                : taskDetailList.complateOutput == null
                  ? '***'
                  : taskDetailList.complateOutput
            }}元</span>
          </div>
        </div>
        <el-dropdown
          v-if="(nodeList.creatorOrMaster || isAddTaskPower) && nodeList.length && taskDetailList.nodeStartTime"
          @command="publishOrder" trigger="click" class="dt-addTask-btn">
          <el-button type="primary" size="mini"> 添加任务<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="task">内部任务</el-dropdown-item>
            <el-dropdown-item command="addOut">企业订单</el-dropdown-item>
            <el-dropdown-item command="addCk">创客订单</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button v-else-if="!taskDetailList.nodeStartTime" type="primary" size="mini" @click="addTaskPrompt"
          class="dt-addTask-btn">
          添加任务<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-button v-else-if="!nodeList.creatorOrMaster || !isAddTaskPower" type="primary" size="mini"
          @click="noPermission" class="dt-addTask-btn">
          添加任务<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>

      </dt>
      <dd class="custom-table" :class="{ empty: taskDetailList.list.length == 0 }">
        <PublicEmpty v-if="taskDetailList.list.length == 0" :ishowImage="true" />
        <el-table v-else :data="taskDetailList.list" style="width: 100%" :border="true"
          :row-class-name="tableRowClassName" @row-click="editTaskCard">
          <el-table-column prop="taskNo" label="编号" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.taskNo || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="majorName" label="所属专业" min-width="148">
            <template slot-scope="scope">
              <el-tooltip :open-delay="500" class="item" effect="dark" :content="scope.row.majorName"
                placement="top-start">
                <span class="dt-content-project-list-project">{{ scope.row.majorName || '--' }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="taskName" label="任务名称" min-width="223">
            <template slot-scope="scope">
              <el-tooltip :open-delay="500" class="item" effect="dark" :content="scope.row.taskName"
                placement="top-start">
                <span class="dt-content-project-list-project">{{ scope.row.taskName || '--' }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="taskStateName" label="任务状态" min-width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.taskStateName || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="taskTypeName" label="任务类型" min-width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.taskTypeName || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createName" label="创建人" min-width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.createName || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="masterName" label="负责人" min-width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.masterName || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="output" label="产值" min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.output === null">***</span>
              <span v-else>{{ scope.row.output }}元</span>
            </template>
          </el-table-column>
          <el-table-column prop="progress" label="进度" min-width="70">
            <template slot-scope="scope">
              <span v-if="scope.row.progress >= 0">{{ scope.row.progress }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="计划工期" min-width="169">
            <template slot-scope="scope">
              <span v-if="scope.row.taskType != 1 && scope.row.demandState == 20">--</span>
              <span v-else>{{ scope.row.startTime.split(' ')[0] }} 至 {{ scope.row.endTime.split(' ')[0] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="planDays" label="计划天数(天)" min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.demandState == 20">--</span>
              <span v-else>{{ scope.row.planDays || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="completeTime" label="完成时间" min-width="100">
            <template slot-scope="scope">
              <span> {{ scope.row.completeTime ? scope.row.completeTime.split(' ')[0] : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="consumeDays" label="工期消耗（天）" min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.demandState == 20">--</span>
              <span v-else>{{ scope.row.consumeDays }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="completeState" label="完成情况" min-width="120">
            <!-- <template slot-scope="scope">
              <span v-if="scope.row.completeState > 0">提前 {{ Math.abs(scope.row.completeState) }} 天完成</span>
              <span v-else-if="scope.row.completeState < 0">延期 {{ Math.abs(scope.row.completeState) }} 天</span>
              <span v-else>--</span>
            </template> -->
            <template slot-scope="scope">
              {{ scope.row | filterComState }}
            </template>
          </el-table-column>
        </el-table>

        <el-pagination v-if="total > 20" class="dt-pagination" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize"
          layout="prev, pager, next, jumper" :total="total">
        </el-pagination>
      </dd>
    </dl>
  </div>
</template>
<script>
export default {
  data() {
    return {
      uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id
      loading: { mounted: false },
      projectDetail: {},
      nodeList: [],
      taskDetailList: { list: [] },
      nodeId: 0,
      currentPage: 1,
      page: 1,
      pageSize: 20,
      total: 0,
      currStep: -1,
      isAddTaskPower: 0 //添加任务权限
    }
  },
  computed: {
    query() {
      return this.$tools.getQuery(this)
    }
  },
  filters: {
    filterComState(row) {
      if (row.taskState !== 7) {
        return '--'
      } else {
        if (row.completeState > 0) {
          return '提前' + row.completeState + '天完成'
        } else if (row.completeState < 0) {
          return '延期' + Math.abs(row.completeState) + '天完成'
        } else {
          return '按时完成'
        }
      }
    }
  },
  methods: {
    goEditNode() {
      var data = { elTab: '2-0', rootProjectId: this.query.rootProjectId }
      this.$router.push('/main/#/pm?tab=detail&' + this.$qs.stringify(data))
    },
    goCreate() {
      this.$router.push('/main/#/pm?tab=create&elTab=0')
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.completeState < 0) {
        return 'postpone-row'
      }
      if (row.completeState > 0) {
        return 'advance-row'
      }
    },
    addTaskPrompt() {
      this.$alert('该节点尚未设置计划工期，无法添加任务', '提示', {
        confirmButtonText: '确定',
        type: 'warning',
        callback: (action) => {
          // this.$message({
          //   type: 'info',
          //   message: `action: ${action}`
          // })
        }
      })
    },
    noPermission() {
      this.$alert('暂无权限，无法添加任务', '提示', {
        confirmButtonText: '确定',
        type: 'warning',
        callback: (action) => {
          // this.$message({
          //   type: 'info',
          //   message: `action: ${action}`
          // })
        }
      })
    },
    publishOrder(command) {
      var queryData = {
        projectName: this.taskDetailList.rootProjectName,
        rootProjectId: this.query.rootProjectId,
        nodeId: this.taskDetailList.nodeId,
        isDetail: 1
      }
      switch (command) {
        case 'task':
          this.$root.$emit('openTaskCard', {
            mode: 'create',
            rootProjectId: this.nodeList.filter((item) => {
              return item.id == this.nodeId
            })[0].rootProjectId,
            rootProjectName: this.nodeList.filter((item) => {
              return item.id == this.nodeId
            })[0].rootProjectName,
            nodeId: this.nodeId,
            startTime: this.nodeList.filter((item) => {
              return item.id == this.nodeId
            })[0].startTime,
            endTime: this.nodeList.filter((item) => {
              return item.id == this.nodeId
            })[0].endTime
          })
          break
        case 'addOut':
          this.getIsEmployer(1, queryData)
          break
        case 'addCk':
          this.getIsEmployer(2, queryData)
          break
      }
    },
    nodeTask(nodeId, addTaskPower) {
      this.isAddTaskPower = addTaskPower

      this.getTaskList(nodeId)
      if (this.currStep === 13) {
        this.$root.$emit('guide-to-14')
      }
    },
    getTreeData(data) {
      var items = [],
        deepEach = function (data) {
          var item = {}
          for (var key in data) {
            if (key !== 'children') {
              item[key] = data[key]
            } else {
              if (data['children'].length) {
                deepEach(data['children'][0])
              }
            }
          }
          items.push(item)
        }
      if (data) {
        deepEach(data)
      }
      return items.reverse()
    },
    getNodeList() {
      var data = [
        {
          userId: this.uid,
          rootProjectId: this.query.rootProjectId
        }
      ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/node/projectNodeList'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              if (data.data.firstNode) {
                this.nodeList = this.getTreeData(data.data.firstNode)
                if (this.query.nodeId) {
                  this.getTaskList(this.query.nodeId)

                  this.nodeList.some((item) => {
                    if (item.id == this.query.nodeId) {
                      this.isAddTaskPower = item.addTaskPower
                      return
                    }
                  })
                } else {
                  this.getTaskList(this.getTreeData(data.data.firstNode)[0].id)
                  this.isAddTaskPower = this.getTreeData(data.data.firstNode)[0].addTaskPower
                }
              } else {
                this.getTaskList()
              }
            } else {
              this.nodeList = []
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => { }
              })
            }
          })
        })
        .catch((error) => { })
    },
    getTaskList(nodeId) {
      this.nodeId = nodeId
      var data = [
        {
          userId: this.uid,
          rootProjectId: this.query.rootProjectId,
          nodeId: nodeId,
          page: this.page,
          pageSize: this.pageSize
        }
      ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/task/taskStat'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.taskDetailList = data.data
              this.total = data.data.total
            } else {
              this.taskDetailList = ''
            }
          })
        })
        .catch((error) => { })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.getTaskList(this.nodeId)
    },
    getProjectDetail() {
      var data = [
        {
          userId: this.uid,
          rootProjectId: this.query.rootProjectId
        }
      ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/project/projectDetail'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.projectDetail = data.data
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => { }
              })
            }
          })
        })
        .catch((error) => { })
    },
    //点击表格每一行 编辑
    editTaskCard(row, column, event) {
      if (row.taskType == 1) {
        //内部
        if (row.createUid == this.uid) {
          this.$root.$emit('openTaskCard', { mode: 'edit', rootProjectId: row.rootProjectId, rootProjectName: row.projectName, taskId: row.id })
        } else {
          this.$root.$emit('openTaskCard', { mode: 'view', rootProjectId: row.rootProjectId, rootProjectName: row.projectName, taskId: row.id })
        }
        if (this.currStep === 14) {
          var timer = setInterval(() => {
            if ($('.dt-task-card')[0]) {
              clearInterval(timer)
              setTimeout(() => {
                this.$root.$emit('guide-to-15')
              }, 500)
            }
          }, 50)
        }
      } else {
        //企业
        //let detailUrl = '/orderNormalJF?id=' + row.demandId + '&demandTitle=' + row.taskName + '&bidType=' + row.taskType
        let dataUrl = ''
        if (row.demandState == 20) {
          dataUrl = 'https://www.ccccdt.com/publish/write?demandId=' + row.demandId
        } else {
          dataUrl = 'https://www.ccccdt.com/orderDetail?id=' + row.demandId
        }
        window.open(dataUrl)
      }
    },
    // 当前用户是否可以发单
    getIsEmployer(type, queryData) {
      // type类型1企业、2创客
      var data = [{ user_id: this.uid }],
        domain = [this.$store.state.USER_DOMAIN],
        path = ['/phoneapi/get_user_info_2019'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              if (data.data.is_employer) {
                if (type == 1) {
                  localStorage.removeItem('orderRuleFormOut')
                  this.$router.push('/main/#/pm?tab=add-out&' + this.$qs.stringify(queryData))
                } else {
                  localStorage.removeItem('orderRuleFormCk')
                  this.$router.push('/main/#/pm?tab=add-ck&' + this.$qs.stringify(queryData))
                }
              } else {
                this.$confirm('您尚未完成雇主认证，无法创建企业和创客订单', '提示', {
                  confirmButtonText: '立即认证',
                  cancelButtonText: '取消',
                  cancelButtonClass: 'dt-button-cancle is-plain',
                  type: 'warning'
                })
                  .then(() => {
                    window.open('/myAccountRoleEmployer')
                  })
                  .catch(() => { })
              }
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => { }
              })
            }
          })
        })
        .catch((error) => { })
    }
  },
  watch: {
    //路由hash变化 加载组件
    $route(to, from) {
      if (to.hash !== from.hash) {
        if (this.query.nodeId) {
          this.getTaskList(this.query.nodeId)
        } else {
          this.getTaskList(this.nodeId)
        }
        this.getProjectDetail()
      }
    }
  },
  mounted() {
    if (this.query.rootProjectId) {
      this.getProjectDetail()
      this.getNodeList()
    }
    this.$root.$on('guide-to-13', () => {
      this.currStep = 13
    })
    this.$root.$on('guide-to-14', () => {
      this.currStep = 14
      this.$root.$emit('closeTaskCard')
    })
    this.$root.$on('guide-to-close', () => {
      this.currStep = -1
    })
    this.$root.$on('guide-to-end', () => {
      this.currStep = -1
    })
  }
}
</script>
<style scoped>
.dt-content-page {
  margin-top: 0px;
  background: #f2f3f5;
}

.dt-pmDetail-info dt {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.dt-pmDetail-info h2,
.dt-pmDetail-info h3 {
  font-size: 20px;
  margin: 20px 0px;
}

.dt-pmDetail-info h3 {
  font-size: 16px;
  margin: 24px 0px 14px;
}

.dt-addTask-btn {
  margin-top: 6px;
}

.dt-pmDetail-info dd {
  padding: 14px;
  background: #fff;
}

.dt-pm-info span {
  margin-right: 40px;
}

.dt-operate,
.dt-operate-edit {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* 节点卡片 */
.dt-pmDetail-info .dt-node-dd {
  /* padding: 14px 14px 14px 0px; */
  padding: 0px 14px 0px 0px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow: auto;
}

.dt-node-list {
  padding: 14px 14px 14px 0px;
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  overflow: auto;
}

.dt-node-add,
.dt-node-card {
  display: -webkit-flex;
  display: flex;
  width: 200px;
  height: 92px;
  border: 1px dashed #dcdfe6;
  border-radius: 8px;

  justify-content: center;
  cursor: pointer;
}

.dt-node-add {
  margin-left: 30px;
}

.dt-node-add .el-button--text {
  color: #c0c4cc;
}

.dt-node-add:hover {
  border: 1px dashed #d6e4ff;
  background: #f0f5ff;
}

.dt-node-add:hover .el-button--text {
  color: #2f54eb;
}

.dt-node-item {
  /* margin-bottom: 14px; */
  /* width: 202px; */
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  flex-direction: column;

  width: 262px;
  justify-content: center;
  align-items: center;
}

.dt-node-card {
  margin: 0 30px;
  width: 176px;
  height: 63px;
  padding: 16px 12px 12px;
  border: 1px solid #d6e4ff;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.dt-node-card .dt-user-name {
  margin-right: 8px;
}

.dt-node-card.working {
  background-color: #f0f5ff;
}

/* .dt-node-card:hover {
  background-color: #85a5ff;
} */
.dt-node-card.dt-cur {
  background-color: #85a5ff;
}

/* .dt-node-card:hover h4,
.dt-node-card:hover p,
.dt-node-card:hover .dt-node-progress, */
.dt-node-card.dt-cur h4,
.dt-node-card.dt-cur p,
.dt-node-card.dt-cur p.dt-null,
.dt-node-card.dt-cur .dt-node-progress {
  color: #fff;
}

.dt-node-card h4 {
  color: #1f1f1f;
  font-weight: normal;
}

.dt-node-card p,
.dt-node-card p.dt-null,
.dt-node-progress,
.dt-node-time {
  color: #606266;
  font-size: 12px;
}

.dt-node-card p {
  margin: 13px 0px 10px;
  color: #606266;
}

.dt-node-card>>>.el-popover {
  min-width: 125px;
}

.dt-node-progress {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* .dt-nodeclose, */
.dt-nodeTag {
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background: #f2f3f5;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 8px;
}

.dt-nodeTag {
  padding: 0px 8px;
  width: auto;
  /* right: 25px; */
  font-size: 12px;
  color: #909399;
}

.dt-nodeTag.completed {
  background: #d9f7be;
  color: #52c41a;
}

.dt-nodeTag.working {
  background: #fffbe6;
  color: #faad14;
}

.el-icon-circle-plus {
  right: -10px;
  font-size: 20px;
  color: #2f54eb;
  z-index: 10;
}

.dt-add-node li {
  line-height: 32px;
}

.dt-node-time {
  margin-top: 8px;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}

.dt-node-time.date {
  justify-content: center;
}

.dt-node-time span {
  margin-left: 6px;
}

/* .dt-node-time >>> .el-button {
  padding: 0px;
  font-size: 12px;
} */
.dt-node-time .inAdvance {
  color: #52c41a;
}

.dt-node-time .postpone {
  color: #f5222d;
}

.dt-node-time.dt-no-data p {
  color: #909399;
  font-size: 12px;
}

.dt-dashed-line {
  width: 31px;
  height: 1px;
  border-top: 1px dashed #e1e6f0;
}

.dt-dashed-line.left {
  left: -31px;
}

.dt-dashed-line.right {
  right: -31px;
}

.dt-node-card p span {
  margin-right: 8px;
}

.dt-node-card p.dt-null {
  color: #909399;
}

/* 节点卡片end */

/* 任务详情 */

.dt-title-box {
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
}

.dt-title-box .dt-statistics {
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.dt-statistics h3 {
  margin-right: 40px;
}

.dt-statistics-task,
.dt-statistics-output {
  margin-top: 10px;
}

.dt-statistics-task span,
.dt-statistics-output span {
  font-size: 12px;
  vertical-align: middle;
  color: #606266;
}

.dt-statistics-task span {
  margin-right: 20px;
}

.dt-statistics-output {
  border-left: 1px solid #c0c4cc;
}

.dt-statistics-output span {
  margin-left: 20px;
}

.dt-pmDetail-info.table {
  flex: 1;
}

/* 任务详情end */
.inAdvance {
  color: #52c41a;
}

.postpone {
  color: #f5222d;
}

/* table */
.dt-edit-node>>>.el-icon-edit-outline {
  margin-left: 12px;
  font-weight: 600;
  font-size: 16px;
}

.dt-edit-node>>>.el-button {
  padding: 0px;
}

.dt-operate-edit>>>.el-button {
  width: 26px;
  height: 26px;
}

.dt-operate-edit>>>.el-input {
  margin-right: 10px;
}

.custom-table {
  flex: 1;

  -webkit-flex-direction: column;
  flex-direction: column;
  text-align: center;
}

.custom-table.empty {
  display: flex;
  justify-content: center;
}

.dt-pagination {
  margin-top: 40px;
}

.custom-table>>>.el-table .el-table__cell {
  padding: 4px 0px;
  font-size: 12px;
}

.custom-table>>>.el-table__body-wrapper {
  color: #1f1f1f;
}

.custom-table>>>.el-table__header th {
  background-color: #fafafa;
}

.custom-table>>>.el-button {
  padding: 0px;
}

.custom-table>>>.el-table tr {
  cursor: pointer;
}

.dt-content-project-list-project {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
